<template>
  <div class="base-panels">
    <h2 class="title2">基本信息 </h2>
    <Descriptions bordered :column="2">
      <DescriptionsItem label="单位工程名称">{{detail?.singleName}}</DescriptionsItem>
      <DescriptionsItem label="单位工程编码">{{detail?.singleCode}}</DescriptionsItem>
      <DescriptionsItem label="所属项目">{{detail?.projectName}}</DescriptionsItem>
      <DescriptionsItem label="工程地址">{{detail?.projectAddr}}</DescriptionsItem>
      <DescriptionsItem label="工程专业类别">{{detail?.projectTypeName}}</DescriptionsItem>
      <DescriptionsItem label="建设规模">{{detail?.projectModule}}</DescriptionsItem>
      <DescriptionsItem label="工程造价(万元)">{{detail?.planAssets}}</DescriptionsItem>
      <DescriptionsItem :label="item.name" v-for="item in detail?.singleIndexList">{{item.val}}</DescriptionsItem>
    </Descriptions>
  </div>

</template>

<script lang="ts">
import {defineComponent, PropType, toRefs } from 'vue';
import {Row, Col , Descriptions } from 'ant-design-vue';
import {singleBaseModel} from "/@/api/single";
import { parseTime } from '/@/utils';

export default defineComponent({
  components: {  Row , Col , Descriptions , DescriptionsItem:Descriptions.Item},
  props : {
    detail:{
      type: Object as PropType<singleBaseModel>,
      default: {}
    }
  },
  setup(props) {
    const { detail } = toRefs(props);
    return {
      detail, parseTime
    }
  },
})
</script>

<style lang="less" scoped>
.base-panels{
  padding: 0 20px 50px;
}

.title2{
  padding: 20px 0 5px;
}

::v-deep(.ant-descriptions){
  .ant-descriptions-item-label{
    width: 240px;
    background: #f3f3f3;
    border-right: 1px solid #eaeaea;
  }

  .ant-descriptions-row {
    border-bottom: 1px solid #eaeaea;
  }
}

.flex{
  flex-wrap: wrap;

  .map{
    width: 100%;
    height: 350px;
  }

  p{
    width: 100%;
    margin: 5px 0 0 0;
    color: #000;
  }
}

.noData{
  background: #fcfcfc url('/src/assets/img/nodata.png') no-repeat center;
  border: 1px solid #EAEAEA;
}
</style>
